import Drawer from "@mui/material/Drawer";
import { settingsReducer } from "providers/store";

import { NavigateItem } from "./navigateItem";
import { UserInfo } from "./userInfo";

import { items } from "../config/items";

import * as Styled from "./index.styled";

export const SideBar = () => {
	const isShowSideBar = settingsReducer((state) => state.isShowSidebar);

	const handleClose = () => settingsReducer.setState({ isShowSidebar: false });

	return (
		<Drawer open={isShowSideBar} onClose={() => handleClose()}>
			<Styled.SideBarWrapper>
				<Styled.SideBarNavigateWrapper>
					<UserInfo />
					{items.map((item, index) => (
						<NavigateItem key={index} {...{ ...item, handleClose }} />
					))}
				</Styled.SideBarNavigateWrapper>
				<Styled.SideBarActionsWrapper>actions</Styled.SideBarActionsWrapper>
			</Styled.SideBarWrapper>
		</Drawer>
	);
};
